<template>
    <div>
        <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-image width="10rem" height="10rem" fit="contain" class="img" :src="ImgUrl + '/logo.png'" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="value1" name="account" label="账号" placeholder="请输入账号"
                    :rules="[{ pattern: patternAcc, message: '请使用邮箱登录' }]" />
                <van-field v-model="value2" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ pattern: patternPas, message: '4到16位(字母,数字,下划线,减号)' }]" />
                <van-field name="switch" label="商家">
                    <template #input>
                        <van-switch v-model="checked" size="20" />
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
        <div style="position:relative;left:13rem;" @click="toRegister">还没账号?点此注册</div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { ImgUrl } from '@/constant';

const onClickLeft = () => history.back();
const value1 = ref('');
const value2 = ref('');
const patternAcc = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; //表单验证的正则表达式
const patternPas = /^[a-zA-Z0-9_-]{4,16}$/;
const userInfoCookie = useCookie('userInfo')

// const onFailed = (errorInfo: any) => {
//     // console.log('failed', errorInfo);
//     login(errorInfo.values)
// };
const onSubmit = (values: any) => {
    login(values)
};
const toRegister = () => {
    router.push('/register')
}
async function login(values: any) {
    let user = {
        type: values.switch ? 0 : 1,
        nickname: values.account,
        password: values.password,
    }
    const { data } = await myUseFetch('/login', { method: 'post', body: user })
    let res: any = data.value
    if (res.code == -1) {
        console.log(res)
    } else if (res.code == 0) {
        let user1 = {
            nickname: values.account
        }
        const { data } = await myUseFetch('/getuser', { method: 'post', body: user1 })
        let res: any = data.value
        let role = 0
        if (values.switch == true) {
            role = 0
        } else {
            role = 1
        }
        res.data.password = ''
        res.data.type = role
        if (res.code == -1) {
            console.log(res)
        } else if (res.code == 0) {
            userInfoCookie.value = JSON.stringify(res.data)
            setTimeout(() => {
                if (role == 0) {
                    router.push('/handleorders')
                } else {
                    router.push('/')
                }
            }, 1000);
        }
    }
}
const router = useRouter();
function goto() {
    router.push('/')
}
const checked = ref(false);
</script>
  
<style scoped>
.notify {
    height: 5rem;
    position: absolute;
}

#toast {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.img {
    position: relative;
    left: 50%;
    transform: translate(-50%);
}
</style>
  